<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
<form class="layui-form" id="add" style="display: none;padding-right: 20px;padding-top: 20px;" lay-filter="formDemo">
    <input type="number" id="id" name="id" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">题目</label>
        <div class="layui-input-block">
            <input type="text" name="question" id="question" lay-verify="title" autocomplete="off" placeholder="请输入题目内容" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项A</label>
        <div class="layui-input-block">
            <input type="text" name="optionA" id="optionA" lay-verify="required" placeholder="请输入A选项内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项B</label>
        <div class="layui-input-block">
            <input type="text" name="optionA" id="optionB" lay-verify="required" placeholder="请输入B选项内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项C</label>
        <div class="layui-input-block">
            <input type="text" name="optionA" id="optionC" lay-verify="required" placeholder="请输入C选项内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项D</label>
        <div class="layui-input-block">
            <input type="text" name="optionA" id="optionD" lay-verify="required" placeholder="请输入D选项内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题目类型</label>
        <div class="layui-input-block">
            <select name="type" id="type">
                <option value="0">0</option>
                <option value="1">1</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">提交人</label>
        <div class="layui-input-block">
            <input type="text" name="creator" id="creator" lay-verify="required" placeholder="提交人姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="navBar">
    <a class="layui-btn layui-btn-primary layui-border-green" lay-event="add">添加</a>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script>
    layui.use(['layer', 'table', 'form', 'laydate'], function(){
        var layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form
            , laydate = layui.laydate;

        var tableName = table.render({
            elem: '#demo'
            ,height: 500
            ,url: '/question/selectAll' //数据接口
            ,page: true //开启分页
            ,toolbar: '#navBar'
            ,limit:10
            ,limits:[5,10,15,20,25,30,50,100]
            ,autoSort:false
            ,cols: [
                [ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'question', title: '问题',sort: true}
                    ,{field: 'optionA', title: '选项A'}
                    ,{field: 'optionB', title: '选项B'}
                    ,{field: 'optionC', title: '选项C'}
                    ,{field: 'optionD', title: '选项D'}
                    ,{field: 'type', title: '类型', width:80 }
                    ,{field: 'status', title: '状态', width:80}
                    ,{field: 'createTime', title: '创建时间', width: 200}
                    ,{field: 'creator', title: '创建人'}
                    ,{field: 'updateTime', title: '修改时间', width: 200}
                    ,{field: 'updater', title: '修改人'}
                    ,{fixed: 'right',title: '操作', align: 'center', toolbar: '#barDemo',width: 130}
                ]
            ]
        });
        form.render('select', 'formDemo');
        table.on('toolbar(test)', function (obj) {
            switch (obj.event){
                case 'add':
                    //加载下拉框内容
                    form.render('select', 'formDemo');
                    layer.open({
                        type: 1,
                        area: ['500px', '600px'],
                        title: '添加数据',
                        content: $("#add"),
                        shade: 0,
                        btn: ['确定', '取消'],
                        success: function (data) {
                            $("#add")[0].reset();
                            form.render();
                        },
                        btn1: function (index, layer0) {
                            var jsonData = {question: $("#question").val(),
                                optionA: $("#optionA").val(),
                                optionB: $("#optionB").val(),
                                optionC: $("#optionC").val(),
                                optionD: $("#optionD").val(),
                                type: $("#type").val(),
                                creator: $("#creator").val()
                            };
                            $.ajax({
                                url:"/question/insert",
                                data:JSON.stringify(jsonData),
                                type:"post",
                                dataType:"json",
                                contentType: 'application/json;charset=UTF-8',
                                success:function (data) {
                                    //成功后的回调函数
                                    if (data.code == 0) {
                                        layer.msg('增加成功');
                                        table.reload('demo', {
                                            page: {
                                                curr: tableName.config.page.pages
                                            }
                                        })
                                        layer.close(index);
                                        $("#add")[0].reset();
                                        form.render();
                                    }else{
                                        layer.msg('增加失败');
                                        layer.close(index);
                                        table.reload('demo', {
                                            page: {
                                                curr: tableName.config.page.curr
                                            }
                                        });
                                    }
                                }

                            });
                            $("#add").css("display", "none");
                        },
                        btn2: function () {
                            $("#add").css("display", "none");
                        },
                        cancel: function (layer0, index) {
                            $("#add").css("display", "none");
                            layer.closeAll();
                        }
                    });
            }
        });

        //修改和删除
        table.on('tool(test)', function (obj) {
            var data = obj.data, layEvent = obj.event;
            if (layEvent === 'edit') {
                layer.open({
                    type: 1,
                    area: ['500px', '600px'],
                    title: '修改数据',
                    content: $("#add"),
                    shade: 0,
                    btn: ['确定', '取消'],
                    success: function (layer0, index) {
                        form.render();
                        $("#id").val(data.id)
                        $("#question").val(data.question);
                        $("#optionA").val(data.optionA);
                        $("#optionB").val(data.optionB);
                        $("#optionC").val(data.optionC);
                        $("#optionD").val(data.optionD);
                        let type = data.type;
                        let typeSelected = 'dd[lay-value=' + type + ']';
                        $("#type").siblings().find(typeSelected).click();
                        $("#creator").val(data.creator);
                    },
                    btn1: function (index, layer0) {
                        var jd = {
                            id: $("#id").val(),
                            question: $("#question").val(),
                            optionA: $("#optionA").val(),
                            optionB: $("#optionB").val(),
                            optionC: $("#optionC").val(),
                            optionD: $("#optionD").val(),
                            type: $("#type").val(),
                            updater: $("#creator").val()
                        };
                        $.ajax({
                            url:"/question/update",
                            data:JSON.stringify(jd),
                            type:"put",
                            dataType:"json",
                            contentType: 'application/json;charset=UTF-8',
                            success:function (data) {
                                //成功后的回调函数
                                if (data.code == 0) {
                                    layer.msg('修改成功');
                                }else{
                                    layer.msg('修改失败');
                                }
                                layer.close(index);
                                table.reload('demo', {
                                    page: {
                                        curr: tableName.config.page.curr
                                    }
                                });
                            }

                        });
                        $("#add").css("display", "none");
                    },
                    btn2: function () {
                        $("#add").css("display", "none");
                    },
                    cancel: function (layer0, index) {
                        $("#add").css("display", "none");
                        layer.closeAll();
                    }
                });
            } else if (layEvent === 'del') {
                layer.confirm('真的删除么', function (index) {
                    $.ajax({
                        url:"/question/delete",
                        data: {id: data.id},
                        type:"delete",
                        success:function (result) {
                            //成功后的回调函数
                            if (result.code == 0) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.msg('删除成功');
                            }else {
                                layer.msg('删除失败');
                            }
                            layer.close(index);
                            table.reload('demo', {
                                page: {
                                    curr: tableName.config.page.curr
                                }
                            })
                        }
                    });
                })
            }
        })

        //监听排序事件
        table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });

    });
</script>
</html>
